
function genElement(container,config){
  const that = this;
  for(let element of config){
    const el = document.createElement(element.tag);
    el.setAttribute("_id",element._id);
    Object.keys(element.attribute).forEach(attr=>{
      if(attr === "textContent"){
        el.textContent = element.attribute[attr]
      }else{
        el.setAttribute(attr,element.attribute[attr]);
      }
    })

    // 事件交互处理
    if(element.on){
      Object.keys(element.on).forEach(event=>{
        if(element.on[event].type === "triggerFlow"){
          el.addEventListener(event,()=>{that.triggerFlow(element.on[event].params)})
        }
      })
    }

    if(element.children){
      genElement.call(that,el,element.children);
    }
    container.appendChild(el);
  }
}

export class InterfaceEngine {

  /**
   * 初始化UI引擎，并挂载到容器中
   * @param {*} container 容器
   * @param {*} instance 上下文
   * @param {*} config 页面配置文件
   */
  constructor(container,instance,config){
    this.$self = instance;
    this.$container = container;
    // 构建页面。
    genElement.call(this,container,config);
  }

  /**
   * 启动流程引擎
   * @param {*} params 流程引擎绑定的参数
   */
  triggerFlow(params){
    this.$self.triggerFlow.call(this,params);
  }

  getValueFromComponent(id){
    const component = this.$container.querySelector(`[_id='${id}']`)
    return component.value;
  }
}